<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/mytag" prefix="yjd"%>
<div class="wrap" >
    <div class="nav">
        <div class="return">
            <a href="<yjd:url url="/report/weekly/list"/>">返回上一级</a>
        </div>
    </div>
    <form action="${requestScope.FPWEB.rootPath }/report/weekly/edit/submit${requestScope.FPWEB.urlStuff}" method="post" autocomplete="off">
        <input type="hidden" name="id" value="${id}">
        <div class="cc">
            <label>开始时间：</label>
            <input type="input" value="${start}" class="input length_1 mr10 J_date date" <c:if test="${forbidEdit=='true'}">disabled</c:if> name="start" min="2017-12-30" max="2025-12-30">
            <label>结束时间：</label>
            <input type="input" value="${end}"  class="input length_1 mr10 J_date date" <c:if test="${forbidEdit=='true'}">disabled</c:if> name="end" min="2017-12-30" max="2025-12-30">
            <button type="submit" class="btn btn_submit length_1" style="display: ${forbidEdit=='true'? 'none':''}" >保存</button>
        </div>
        <div id="content" class="table_list">
            <table id="report" width="100%">
                <thead>
                    <tr>
                        <td>指标</td>
                        <td>数值</td>
                        <td>较上周变化</td>
                    </tr>
                </thead>
            </table>
        </div>
    </form>
</div>

<script>
    YJD.use('AppAdminCommon');
    YJD.use('AppBICommon');
    function initTable() {
        forbidEdit = '';
        if(${forbidEdit}){
            forbidEdit = 'disabled';
        }

        var report = eval(${report}); // weekly report

        var rootInfo = '';
        rootInfo = rootInfo + '<input name="sid" type="hidden" value="'+report.sid+'">';
        rootInfo = rootInfo + '<input name="pid" type="hidden" value="'+report.pid+'">';
        rootInfo = rootInfo + '<input name="displayName" type="hidden" value="'+report.displayName+'">';
        rootInfo = rootInfo + '<input name="currentWeekValue" type="hidden" value="">';
        rootInfo = rootInfo + '<input name="thanLastWeek" type="hidden" value="">';
        $('#content').append(rootInfo);

        var reportContent = report.subItem; // array
        var table = $('#report');
        for (itm in reportContent) {
            parseTableFromJson(table, 'subItem['+itm+']', reportContent[itm], '');
        }
    };
    function parseTableFromJson(table, name, itm, retract){
        if(itm.pid > 1){
            retract = retract + '&#9;';
        }

        var trHtml = '<tr>';
        if(itm.pid == 0){
            trHtml = '<tr bgcolor="#F9FFE9">';
        }

        // hidden field
        trHtml = trHtml + '<input name="'+name+'.sid" type="hidden" value="'+itm.sid+'">';
        trHtml = trHtml + '<input name="'+name+'.pid" type="hidden" value="'+itm.pid+'">';
        trHtml = trHtml + '<input name="'+name+'.displayName" type="hidden" value="'+itm.displayName+'">';

        var items = itm.subItem;

        // display field
        trHtml = trHtml + '<td width="300"><PRE>' + retract + getContent('', itm.displayName, false, itm.pid) + '</PRE></td>';
        trHtml = trHtml + '<td>' + getContent(name + '.currentWeekValue', itm.currentWeekValue, true, itm.pid, false) + '</td>';
        trHtml = trHtml + '<td>' + getContent(name + '.thanLastWeek', itm.thanLastWeek, true, itm.pid, true) + '</td>';
        trHtml = trHtml + '</tr>';

        // append tr to table body
        table.append(trHtml);

        // recursion parse
        if(isNotNull(items)){
            for (idx in items) {
                parseTableFromJson(table, name+'.subItem['+idx+']', items[idx], retract);
            }
        }
    };
    function getContent(name, data, input, pid, percent){
        if(input && pid > 0){
            if(percent){
                return '<input name="' + name + '" value="' + data + '" type="text" class="input length_6 mr10" '+forbidEdit+' onblur="addPercent(event)" style="' + textColor(data) + '">';
            }
            return '<input name="' + name + '" value="' + data + '" type="text" class="input length_6 mr10" '+forbidEdit+'>';
        }else{
            return isNotNull(data) ? data : '';
        }
    };
    function addPercent(event) {
        var val = event.target.value;
        var parseVal = parseInt(val);
        if(!isNaN(parseVal)){
            event.target.value = parseVal + "%";
            event.target.style.color = parseVal >= 0 ? 'green':'red';
        }else{
            event.target.value = val == 'NA' ? 'NA' : '';
            event.target.style.color = 'black';
        }
    };
    function textColor(data) {
        var parseVal = parseInt(data);
        if(!isNaN(parseVal)){
            return parseVal >= 0 ? "color: green" : "color: red";
        }
    };
    function isNotNull(data) {
        return (data == '' || data == undefined || data == null) ? false : true;
    };
    initTable();
</script>
